<template>
    <div class="welcome">
        <!-- 第一行 -->
        <!-- banner -->
        <!-- 饼图 -->
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="content">
                    banner
                </div>
            </el-col>
            <el-col :span="8">
                <div class="content">
                    饼图
                </div>
            </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="content">柱形图</div>
            </el-col>
            <el-col :span="8">
                <div class="content">折线图</div>
            </el-col>
            <el-col :span="8">
                <div class="content">数据统计图</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.welcome {
    .el-row {
        .el-col {
            height: 100%;
            margin-bottom: 20px;

            .content {
                @include flex();
                font-size: 36px;
                background-color: #dce6e9;
                height: 100%;
            }
        }

        &:nth-child(1) {
            height: calc((100vh - 120px)/2);
        }

        &:nth-child(2) {
            height: calc((100vh - 120px)/2 - 50px);
        }
    }
}
</style>